<template>
  <div class="customer-detail">
    <!-- 头部信息 -->
    <el-card class="header-card">
      <div class="header-info">
        <h2>{{ customer.name }}</h2>
        <el-button size="mini" type="primary">已成交</el-button>
        <el-button size="mini" type="danger">关闭</el-button>
        <el-button size="mini" type="primary">已成交</el-button>
        <el-button size="mini" type="primary">已成交</el-button>
        <div class="meta">
          <span>负责人：管理员</span>
          <span>更新时间：2024-09-16 18:46:52</span>
        </div>
      </div>
    </el-card>

    <!-- 主体内容 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="info-card">
          <el-descriptions title="基本信息" :column="3" border>
            <el-descriptions-item label="客户名称">孙玉莲</el-descriptions-item>
            <el-descriptions-item label="手机"
              >18964836405</el-descriptions-item
            >
            <el-descriptions-item label="客户行业"
              >18964836405</el-descriptions-item
            >
            <el-descriptions-item label="客户级别">-</el-descriptions-item>
            <el-descriptions-item label="邮箱">-</el-descriptions-item>
            <el-descriptions-item label="网址">-</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <!-- 主体内容 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="info-card">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            type="border-card"
          >
            <el-tab-pane label="达人地址信息" name="0">
              <contactindex />
            </el-tab-pane>
            <el-tab-pane label="渠道销售追踪" name="1"> </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// src\views\sample\contact\contactindex.vue
// import ContactForm from "./components/ContactForm.vue";
// import Add from "@/views/sample/Add/Add.vue";
import contactindex from "@/views/sample/contact/contactindex.vue";
export default {
  components: { contactindex },
  data() {
    return {
      activeName: 0,
      customer: {
        name: "孙玉莲",
        status: "已成交",
        phone: "18964836405",
      },
      actions: [
        "详细资料",
        "联系人",
        "团队成员（1）",
        "商机",
        "合同",
        "国家",
        "国内",
        "发展",
      ],
      quickActions: [
        "创建任务",
        "创建联系人",
        "创建商机",
        "创建合同",
        "创建回收",
      ],
      contactDialogVisible: false,
    };
  },
  methods: {
    handleClick(tab, event) {},
    handleQuickAction(action) {
      if (action === "创建联系人") {
        this.contactDialogVisible = true;
      }
      // 其他操作处理...
    },
    showContactDialog() {
      this.contactDialogVisible = true;
    },
    handleContactSubmit(formData) {
      // 提交联系人逻辑
      console.log("New contact:", formData);
      this.contactDialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tab-pane {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
::v-deep .el-tabs__content {
  /* height: 185px;
  border-radius: 4px; */
  // background-color: rgb(240, 242, 245) !important; /* 使用你想要的蓝色 */
}
.customer-detail {
  // padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-card {
  // margin-bottom: 16px;

  .header-info {
    h2 {
      display: inline-block;
      margin-right: 15px;
    }

    .meta {
      margin-top: 10px;
      color: #909399;

      span {
        margin-right: 20px;
      }
    }
  }
}

.action-card {
  .section {
    margin-bottom: 25px;

    h3 {
      color: #409eff;
      margin-bottom: 12px;
    }

    .el-button {
      width: 100%;
      margin-bottom: 8px;
    }
  }
}

.info-card {
  margin-top: 16px;
}

.alert-box {
  margin: 20px 0;
}
</style>